/**
 * @overview rmoo.css
 * styling for resistor-moo Mootools mini-framework
 */

/**
 * loading-indicator.
 * @TODO add spinner gif to framework /resources/images.
 */
#loading {
    width: 200px;
    font-size: 14px;
    top:42%;
    left: 43%;
    padding:0;
    position: absolute;
    background: #fff;
    border: 3px solid #333;
    z-index: 20000;
}
#loading .loading-indicator {
    background-image: url(../images/spinner.gif);
    color:#444;
    padding-left: 38px;
    padding-top: 14px;
    height: 32px;
    font-size: 152%;
    font-weight: bold;
}

/**
 * msg div styling used with App.setAlert(true, 'your message');
 * TODO add icons to /resources/images for the App.STATUS_* constants.
 * eg:
 * ICON_ERROR :                'icon-error',
 * ICON_OK :                   'icon-accept',
 * ICON_NOTICE :               'icon-information',
 * ICON_HELP :                 'icon-help',
 * <div class="msg">
 *  <div class="x-box-tl">
 *      <div class="x-box-tr">
 *          <div class="x-box-tc">
 *
 *          </div>
 *      </div>
*
 *  </div>
 *  <div class="x-box-ml">
 *      <div class="x-box-mr">
 *          <div class="x-box=mc">
 *
 *          </div>
 *      </div>
 *  </div>
 *  <div class="x-box-bl">
 *      <div class="x-box-br">
 *          <div class="x-box-bc">
 *
 *          </div>
 *      </div>
 *  </div>
 * </div>
 */
.msg {
    border: 2px solid #ccc;
    background: #eee;
}

/**
 * RMoo.Panel styles
 */
.r-panel {
    border: 1px solid #ccc;
    position:
}
.r-panel .r-panel-header {
    background: #eee;
    border-bottom: 1px solid #ccc;
    padding: 5px;
}
.r-panel .r-panel-body {
    padding: 5px;
}
